<template>
	<el-row v-loading="loading" style="width:100%">
		<!-- <el-row class="search-form-row" style="padding: 10px;">用户管理</el-row> -->
		<el-row class="search-form-row">
			<el-form :inline="true" class="demo-form-inline">
				<el-form-item>
					<el-button type="primary" @click="showAddDialog" v-show="adminName === realAdminName || realAdminName === '超级管理员' ">{{$t('user.newUser')}}</el-button>
				</el-form-item>
			</el-form>
		</el-row>
		<el-row>
			<el-table :data="itemList" style="width: 100%">
				<el-table-column type="index" width="50"></el-table-column>
				<el-table-column align="left" prop="user_name" :label="$t('user.mail')"></el-table-column>
				<el-table-column align="left" prop="real_name" :label="$t('user.name')"></el-table-column>
				<el-table-column align="left" prop="mobilephone_number" :label="$t('user.phone')"></el-table-column>
				<el-table-column align="left" prop="company_name" :label="$t('user.companyName')">
					<template slot-scope="scope">
						<el-tooltip placement="right-end">
							<div slot="content"><span v-html="getCompanyName(scope.row.company_id, scope.row.company_name)"></span></div>
							<span v-html="getCompanyName(scope.row.company_id, scope.row.company_name)" class="word-break"></span>
						</el-tooltip>

					</template>
				</el-table-column>
				<el-table-column align="left" prop="expire_time" :label="$t('user.time')"></el-table-column>
				<el-table-column align="left" :label="$t('standard.operation')" width="300px">
					<template slot-scope="scope">
						<el-button size="mini" type="success" @click="showModifyDialog(scope.row)" v-show="adminName === realAdminName || realAdminName === '超级管理员'  ">{{$t('standard.modify')}}</el-button>
						<el-button size="mini" type="danger" @click="deleteUser(scope.row.id)" v-show="adminName === realAdminName || realAdminName === '超级管理员' ">{{$t('standard.delete')}}</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-row>
		<el-row style="text-align: right;margin-top: 10px">
			<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageInfo.currentPage"
			 :page-sizes="[10, 20, 50]" :page-size="pageInfo.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.totalNum">
			</el-pagination>
		</el-row>

		<el-dialog :title="formTitle" :visible.sync="addFormVisible" width="30%" :show-close="false">
			<el-form :model="addForm" :rules="addRules" ref="addForm" label-width="100px">
				<el-form-item :label="$t('user.mail')" prop="user_name">
					<el-input v-model="addForm.user_name" auto-complete="off" style="width: 90%;" :disabled="!!addForm.id" maxlength="50"></el-input>
				</el-form-item>
				<el-form-item :label="$t('user.password')" prop="password">
					<el-input v-model="addForm.password" auto-complete="off" style="width: 90%;"></el-input>
				</el-form-item>
				<el-form-item :label="$t('user.name')" prop="real_name">
					<el-input v-model="addForm.real_name" auto-complete="off" style="width: 90%;"></el-input>
				</el-form-item>
				<el-form-item :label="$t('user.phone')" prop="phone">
					<el-input v-model="addForm.phone" auto-complete="off" style="width: 90%;"></el-input>
				</el-form-item>
				<el-form-item :label="$t('user.time')" prop="expire_time">
					<el-date-picker style="width: 90%;" v-model="addForm.expire_time" type="date" :placeholder="$t('user.selectTime')">
					</el-date-picker>
				</el-form-item>
				<el-form-item :label="$t('user.company')" prop="company_id" v-show="subCompanyIdList.length !== 0">
					<select-tree v-model="addForm.company_id" width="90%" :options="companyIdList" :props="defaultProps" />
				</el-form-item>
				<!--
              <el-form-item label="所属分组" prop="group_id">
                <el-select v-model="addForm.group_id" value-key="id" placeholder="请选择分组" style="width: 90%;" :disabled="!!addForm.id">
                  <el-option v-for="cc in groupList" :key="cc.id" :label="cc.groupName" :value="cc.id"></el-option>
                </el-select>
              </el-form-item>
              -->
				<!--<el-form-item label="有效期" prop="expire_time">-->
				<!--<el-date-picker type="date" placeholder="选择日期" v-model="addForm.expire_time" style="width: 90%;"></el-date-picker>-->
				<!--</el-form-item>-->
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="addFormVisible = false">{{$t('standard.cancel')}}</el-button>
				<el-button type="primary" @click="saveOrUpdateUser" :loading="saving">{{$t('standard.confirm')}}</el-button>
			</div>
		</el-dialog>

		<el-dialog :title="$t('user.permission')" :visible.sync="configVisible" width="40%" v-loading="configLoading" @close="cleanSelected"
		 :show-close="false">
			<div style="max-height: 300px;">
				<el-tree :data="menuList" show-checkbox default-expand-all node-key="id" ref="tree" highlight-current :props="defaultProps">
				</el-tree>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="configVisible = false">{{$t('standard.cancel')}}</el-button>
				<el-button type="primary" @click="configAuth" :loading="saving">{{$t('standard.confirm')}}</el-button>
			</div>
		</el-dialog>

	</el-row>
</template>

<script>
	import userDetail from './userDetail'

	export default userDetail;
</script>

<style scoped>

</style>
